<template>
	<div class="app-container">
		<el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="130px" style='margin: auto; max-width: 1200px'>
			<el-form-item label="标题" prop="title">
				<el-input disabled v-model="temp.title" type="text" placeholder="请输入"></el-input>
			</el-form-item>
			<el-form-item label="相关股票">
				<el-tag v-for="tag in temp.newsStockCodes" :key="tag">{{ tag }}</el-tag>
			</el-form-item>
			<el-row>
				<el-col :span="12">
					<el-form-item label="相关行业板块" prop="industryInfos">
						<el-tag v-for="tag in temp.industryInfos" :key="tag.code">{{ tag.name }}</el-tag>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="相关概念板块" prop="conceptInfos">
						<el-tag v-for="tag in temp.conceptInfos" :key="tag.code">{{ tag.name }}</el-tag>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="相关原创板块" prop="userDefinedInfos">
						<el-tag v-for="tag in temp.userDefinedInfos" :key="tag.code">{{ tag.name }}</el-tag>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="所属栏目" prop="classInfos">
						<el-tag v-for="tag in temp.classInfos" :key="tag.name">{{ tag.name }}</el-tag>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="相关人物">
						<el-tag v-for="tag in temp.relatedPeoples" :key="tag">{{ tag }}</el-tag>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="相关机构">
						<el-tag v-for="tag in temp.relatedOrgans" :key="tag">{{ tag }}</el-tag>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
					<el-form-item label="相关地域">
						<el-tag v-for="tag in temp.relatedDistricts" :key="tag">{{ tag }}</el-tag>
					</el-form-item>
				</el-col>
				<el-col :span="12">
	        		<el-form-item label="相关产业链">
	        			<el-tag v-for="tag in temp.relatedChain" :key="tag">{{tag}}</el-tag>
	            	</el-form-item>
  				</el-col>
			</el-row>
			<el-row>
				<el-col :span="12">
		            <el-form-item label="核心标签(主)" prop="mainKeyword">
		            	<el-tag v-for="tag in temp.mainKeyword" :key="tag">{{tag}}</el-tag>
		            </el-form-item>
          		</el-col>
				<el-col :span="12">
		            <el-form-item label="核心标签(副)" prop="viceKeyword">
		            	<el-tag v-for="tag in temp.viceKeyword" :key="tag">{{tag}}</el-tag>
		            </el-form-item>
	          	</el-col>
          	</el-row>
          	<el-row>
				<el-col :span="12">
		            <el-form-item label="数据源来源" prop="tbSource">
		              	<el-input v-model="temp.tbSource" readonly></el-input>
		            </el-form-item>
	          	</el-col>
				<el-col :span="12">
        			<el-form-item label="所属专题" prop="seminarName">
        				<el-tag v-for="tag in temp.seminarName" :key="tag">{{tag}}</el-tag>
            		</el-form-item>
  				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="相关事件" prop="events">
						<el-tag v-for="tag in temp.events" :key="tag">{{tag}}</el-tag>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<el-form-item label="态度" prop="attitude">
						<el-select disabled v-model="temp.attitude" type="text" placeholder="请选择">
							<el-option :value="-2" label="无态度"></el-option>
							<el-option :value="-1" label="利空"></el-option>
							<el-option :value="0" label="中性"></el-option>
							<el-option :value="1" label="利好"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="状态" prop="online">
						<el-select disabled v-model="temp.online" type="text" placeholder="请选择">
							<el-option :value="0" label="立即上线"></el-option>
							<el-option :value="1" label="暂缓上线"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="推送方式" prop="sendChannel">
						<el-select disabled :default-first-option="true" v-model="temp.sendChannel" type="text" placeholder="请选择">
							<el-option value="全员推送" label="全员推送"></el-option>
							<el-option value="不推送" label="不推送"></el-option>
							<el-option value="按板块推送" label="按板块推送"></el-option>
							<el-option value="按个股推送" label="按个股推送"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="置顶时间" prop="topTime">
						<el-input disabled v-model="temp.topTime" type="text" placeholder="选择日期"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="摘要" prop="summary">
						<el-input disabled v-model="temp.summary" type="textarea" :rows="5" placeholder="请输入"></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="正文预览" prop="content">
						<el-tabs type="card">
							<el-tab-pane label="手机预览">
								<el-card class="phone">
									<div class="top-bar">
										资讯预览
									</div>
									<div class="title">{{temp.title}}</div>
									<div class="info">
										<span>来源：{{temp.source}}&emsp;</span>
										<span>发布时间：{{temp.updateTime}}</span>
									</div>
									<div class="summary">摘要：{{temp.summary}}</div>
									<div class="content">
										<p v-html="formatContent(temp)"></p>
									</div>
								</el-card>
							</el-tab-pane>
							<el-tab-pane label="PC预览">
								<el-card class="pc">
									<div class="title">{{temp.title}}</div>
									<div class="info">
										<span>来源：{{temp.source}}&emsp;</span>
										<span>发布时间：{{temp.updateTime}}</span>
									</div>
									<div class="summary">摘要：{{temp.summary}}</div>
									<div class="content">
										<p v-html="formatContent(temp)"></p>
									</div>
								</el-card>
							</el-tab-pane>
						</el-tabs>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="8">
					<el-form-item label="发布时间" prop="publishTime">
						<el-input disabled v-model="temp.publishTime" placeholder="请输入"></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="来源" prop="source">
						<el-input disabled v-model="temp.source" ></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item>
						<el-button plain class="search-bar-button" style="border-width: 2px" type="primary" @click="extendBarVisable = !extendBarVisable">{{extendBarVisable?'收起':'展开'}}附加字段<i :class="extendBarVisable?'el-icon-caret-top':'el-icon-caret-bottom'"></i></el-button>
					</el-form-item>
				</el-col>
				<el-col v-show="extendBarVisable" v-for="i of 10" :key='i' :span="24">
					<el-form-item :label="'附加字段'+i" :prop="'additional_'+ i">
						<el-input disabled v-model="temp['additional_'+ (i-1)]" type="text" placeholder=""></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-form-item label="资讯配图">
						<span v-if="!image">暂无配图</span>
						<img style="max-height: 300px" :src="image.url" :alt="image.name">
					</el-form-item>
				</el-col>
			</el-row>
	        <el-row>
	        	<el-col :span="12">
	            <el-form-item label="附件列表">
					<el-upload
						:action="uploadAction"
						:headers="{ Authorization: 'Bearer ' + $store.getters.token }"
						disabled
						:file-list="infoList">
					</el-upload>
	            </el-form-item>
	        	</el-col>
	        </el-row>
		</el-form>
		<div style="text-align: center;">
			<el-button type="primary" @click="goBack">关闭</el-button>
		</div>
	</div>
</template>

<script>
	import { ZtArticleGet, originalUploadUrl } from '@/api/article'
	import { getTypeDict } from '@/api/systemManagement'
	
	export default {
		name: 'origPreview',
		props: ['infoMsg'],
		data() {
			return {
				temp: {},
				rules:{},
				uploadAction: originalUploadUrl,
				infoList: [],
		        dataDict: {
		          	news_source: []
        		},
        		extendBarVisable: false,
        		image: ''
			}
		},
		created() {
//			this.getDict()
			this.init()
		},
		methods: {
			init(){
				ZtArticleGet(this.infoMsg).then(res => {
				  	this.temp = Object.assign({}, res.Data[0])
				  	for (let i = 0; i < this.temp.newsInfoExtends.length; i++) {
				        this.temp['additional_' + this.temp.newsInfoExtends[i].extendIndex] = this.temp.newsInfoExtends[i].extendContent || ''
				  	}
				  	this.image = res.Data[0].pictureEntity || ''
				  	if (this.temp.online === 2) this.temp.online = 0
					let tempVal1 = []
					if(this.temp.stockInfos){
						tempVal1 = this.temp.stockInfos.map(e => {
							return `${e.name}(${e.code})`
						})
					}
		          	if(this.temp.location){
						this.infoList = [{ name: this.temp.locationName, url: this.temp.location }]
		         	} else {
		         		this.infoList = []
		         	}
				  	this.$set(this.temp, 'newsStockCodes', Object.assign([], tempVal1))
				  	this.$nextTick(() => {
				    	this.$refs['dataForm'].clearValidate()
				  	})
				})
			},
			goBack() {
				this.$emit('closeFile')
			},
			formatContent(data) {
				if(!data.content) return
				const keyword = []
				if(data.newsStockCodes && data.newsStockCodes.length > 0) {
					keyword.push(data.newsStockCodes.map(val => {
						return val.replace(/\(\d*(\d{6})\)/, '|$1')
					}).join('|'))
				}
				if(data.conceptInfos && data.conceptInfos.length > 0) {
					keyword.push(data.conceptInfos.map(val => {
						return val.code + '|' + val.name
					}).join('|'))
				}
				if(data.industryInfos && data.industryInfos.length > 0) {
					keyword.push(data.industryInfos.map(val => {
						return val.code + '|' + val.name
					}).join('|'))
				}
				if(data.userDefinedInfos && data.userDefinedInfos.length > 0) {
					keyword.push(data.userDefinedInfos.map(val => {
						return val.code + '|' + val.name
					}).join('|'))
				}
				if(keyword.length === 0) return data.content
				const contentReg = new RegExp('(?!<[^>]*)(' + keyword.join('|').replace(/\*/g,'\\*') + ')(?![^<]*>)', 'g')
				return data.content.replace(contentReg, '<span class="news-keyword">$1</span>')
			},
//	      	getDict () {
//		        getTypeDict({type: 'news_source'}).then(response => {
//		          	this.dataDict.news_source = response.Data
//		        })
//	      	},
//	      	formatSource (data) {
//		        for (let i = 0; i < this.dataDict.news_source.length; i++) {
//		          	if (this.dataDict.news_source[i].dictKey === data) return this.dataDict.news_source[i].dictValue
//		        }
//		        return data
//	      	}
		}

	}
</script>

<style scoped>
.el-tag {
	margin-right: 5px;
}
</style>

<style lang="stylus" scoped>
.phone {
    word-break break-all
    line-height 24px
    margin auto
    width 375px
    height 600px
    overflow-y auto
    &::-webkit-scrollbar {
      display: none;
    }
    .top-bar {
      text-align center
      padding 10px 15px
      margin 0 -20px
      position absolute
      top 0
      width 373px
      background-color #000
      color #fff
      font-size 120%
      font-weight bold
    }
    .title {
      text-align justify
      margin-top 52px
      font-size 110%
      font-weight bolder
    }
    .info {
      font-size 85%
      color #5d5d5d
    }
    .summary {
      text-align justify
      padding 5px 10px
      margin 10px 0 10px
      font-size 90%
      line-height 1.2rem
      color #333
      border-radius 5px
      background-color #ddd
    }
    .content {
      text-align justify
      &:after {
        display: inline-block;
        content: '';
        padding-left: 100%;
      }
    }
}
  
.pc {
    word-break break-all
    line-height 24px
    font-size: 16px
    margin auto
    width 100%
    height 600px
    overflow-y auto
    &::-webkit-scrollbar {
      display: none;
    }
    .title {
      text-align justify
      margin-top 12px
      font-size 120%
      font-weight bolder
    }
    .info {
      font-size 85%
      color #5d5d5d
    }
    .summary {
      text-align justify
      padding 5px 10px
      margin 10px 0
      font-size 90%
      line-height 1.2rem
      color #333
      border-radius 5px
      background-color #ddd
    }
    .content {
      text-align justify
      &:after {
        display: inline-block;
        content: '';
        padding-left: 100%;
      }
    }
}

</style>